<template>
  <div class="box">
    <div id="" style="margin-bottom: 20px;">
      <el-button :type="type=='列队发布与管理'?'primary':''" v-has @click="type='列队发布与管理'">列队发布与管理</el-button>
      <el-button :type="type=='数据列队调度'?'primary':''" v-has @click="type='数据列队调度'">数据列队调度</el-button>
      <el-button :type="type=='离线列队执行引擎'?'primary':''" v-has @click="type='离线列队执行引擎'">离线列队执行引擎</el-button>
      <el-button :type="type=='实时列队执行引擎'?'primary':''" v-has @click="type='实时列队执行引擎'">实时列队执行引擎</el-button>
    </div>

    <template v-if="type=='列队发布与管理'">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" size="mini" @click="addVisible=true">发布</el-button>
      </div>
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'&&item.title!='status'">
              {{scope.row[item.title]}}
            </div>
            <div v-else-if="item.title=='status'">
              {{scope.row[item.title]?'已申请':'未申请'}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="row=scope.row,editVisible=true">编辑</el-button>
              <el-button type="primary" size="mini" @click="deledeRank(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据列队调度'">
      <el-table :data="tableData2" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" v-if="!scope.row[item.title]" size="mini"
                @click="scope.row[item.title]=1,start()">开始执行
              </el-button>
              <el-button type="primary" v-if="scope.row[item.title]" size="mini" @click="scope.row[item.title]=0,end()">
                暂停执行
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='离线列队执行引擎'">
      <el-table :data="tableData3" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper3'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]=='不同意'"
                @click="scope.row[item.title]='同意',Ascending()">升序</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]=='同意'"
                @click="scope.row[item.title]='不同意',Descending()">降序</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='实时列队执行引擎'">
      <el-table :data="tableData4" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead4" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper4'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]=='不同意'"
                @click="scope.row[item.title]='同意',Ascending()">升序</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]=='同意'"
                @click="scope.row[item.title]='不同意',Descending()">降序</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="addVisible">
      <el-dialog title="列队发布" :close-on-click-modal="false" :visible.sync="addVisible" width="20%">
        <add :ranklist="ranklist" :close="close" />
      </el-dialog>
    </template>
    <template v-if="editVisible">
      <el-dialog title="列队编辑" :close-on-click-modal="false" :visible.sync="editVisible" width="20%">
        <edit :ranklist="ranklist" :close="close" :row="row" />
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import add from "./components/add.vue";
  import edit from "./components/edit.vue"
  export default {
    components: {
      add,
      edit
    },
    mounted() {
      this.ranklist()
    },
    data() {
      return {
        row: {},
        addVisible: false,
        editVisible: false,
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "数据名称",
            title: "dataName",
          },
          {
            id: 2,
            label: "数据类型",
            title: "dataType",
          },
          {
            id: 3,
            label: "所属行业",
            title: "industry",
          },
          {
            id: 6,
            label: "来源",
            title: "source",
          },
          {
            id: 4,
            label: "状态",
            title: "status",
          },
          {
            id: 5,
            label: "操作",
            title: "oper1",
          }
        ],
        tableData1: [{
          dataName: "1",
          dataType: '安全事件',
          industryInvolved: '农、林、牧、渔业',
          source: '111',
          status: '未申请',
          oper1: 's'
        }],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "数据名称",
            title: "dataName",
          },
          {
            id: 2,
            label: "数据类型",
            title: "dataType",
          },
          {
            id: 6,
            label: "所属行业",
            title: "industryInvolved",
          },
          {
            id: 3,
            label: "来源",
            title: "source",
          },
          {
            id: 4,
            label: "状态",
            title: "status",
          },
          {
            id: 5,
            label: "调度",
            title: "oper2",
          }
        ],
        tableData2: [{
          dataName: "1",
          dataType: '安全事件',
          industryInvolved: '农、林、牧、渔业',
          source: '111',
          status: '未申请',
          oper2: 1
        }],
        tableHead3: [{
            id: 1,
            label: "编号",
            title: "id",
          },
          {
            id: 2,
            label: "引擎名称",
            title: "engName",
          },
          {
            id: 3,
            label: "队列类型",
            title: "queType",
          },
          {
            id: 4,
            label: "队列名称",
            title: "queName",
          },
          {
            id: 5,
            label: "队列顺序",
            title: "queSort",
          },
          {
            id: 6,
            label: "操作",
            title: "oper3",
          }
        ],
        tableData3: [{
          id: "1",
          engName: '引擎1',
          queType: '离线队列',
          queName: '数据队列',
          queSort: '1',
          oper3: '同意'
        }],

        tableHead4: [{
            id: 1,
            label: "编号",
            title: "id",
          },
          {
            id: 2,
            label: "引擎名称",
            title: "engName",
          },
          {
            id: 3,
            label: "队列类型",
            title: "queType",
          },
          {
            id: 4,
            label: "队列名称",
            title: "queName",
          },
          {
            id: 5,
            label: "队列顺序",
            title: "queSort",
          },
          {
            id: 6,
            label: "操作",
            title: "oper4",
          }
        ],
        tableData4: [{
          id: "1",
          engName: '引擎1',
          queType: '在线队列',
          queName: '数据队列',
          queSort: '1',
          oper4: '同意'
        }],
      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      },
      ranklist() {
        this.$server.ranklist().then((res) => {
          console.log(res)
          this.tableData1 = res.page.list
        })
      },
      close() {
        this.addVisible = false;
        this.editVisible = false;
      },
      deledeRank(id) {
        this.$server.deledeRank({
          id
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.ranklist()
        })
      },
      start() {
        this.$message({
          type: 'success',
          message: '执行成功'
        })
      },
      end() {
        this.$message({
          type: 'success',
          message: '暂停成功'
        })
      },
      Ascending() {
        this.$message({
          type: 'success',
          message: '升序成功'
        })
      },
      Descending() {
        this.$message({
          type: 'success',
          message: '降序成功'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
